<template>
	<view class="group_page">
		<view class="team_name">团报名称：{{teampaper.name}}</view>
		<view class="line">选择组别</view>
		<!-- 组别名称 -->
		<view :class="['task_content', group_index == index ? 'task_content_c' : '']" 
		@click="changegroup(index,item.id)" v-for="(item, index) in group_list">
	
			<view class="task_content_item">
				<view class="title">
					<view class="top">
						{{ item.name }}
						<text v-if="item.allpeople_num > item.people_num && item.people_num">({{ item.people_num }}-{{ item.allpeople_num }})</text>
					</view>
				</view>
				<!-- 早鸟价 -->
				<view class="price" >￥{{ item.group_price }}</view>
			</view>
			<view class="task_content_bot" v-if="item.is_verify">
				<view class="left">审</view>
				<view class="right">报名成功后需人工审核，若未通过费用则原路返回</view>
			</view>
			<view class="morning" >
				团报价
				<view class="jt"></view>
			</view>
			<!-- 审核提示 -->
			<view class="sinup_shen" v-if="item.is_verify"><image src="../../static/img/sinup_shen.png" mode=""></image></view>
			<!-- 选择 -->
			<view class="sinup_gou"><image src="../../static/img/sinup_gou.png" mode=""></image></view>
		</view>
		<!-- 进度条 -->
		<view class="progress ">
			<!-- 	<view class="num">
				20人成团
			</view> -->
			<view class="right_pro">
				<!-- 已报名人数 -->
				<view :style="'width:' + haspercent" class="right_progress"></view>
				<view :style="'width:' + onepercent" v-if="progressflag" class="right_progress_one"></view>
				<!-- <view :style="'width:' + twopercent" class="right_progress_two"></view> -->
				<image :style="'left:' + haspercent" class="progress_img" src="../../static/img/progress.png" mode="widthFix"></image>
				<!-- 成团数 -->
				<view class="group_peoplenum" :style="'left:' + onepercent">
					{{teampaper.base_num}}人成团
					<view class="jt"></view>
				</view>
				<!-- 总报名人数 -->
				<view class="singup_peoplenum">
					<view class="l_num">{{SinupNum}}</view>
					/
					<view class="r_num">{{teampaper.total_people}}</view>
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="remake">
			<text>备注：</text>
			抱团基数代表用户享受跑团的价格 抱团基数代表用户享受跑团的价格抱团基数代表用户享受跑团的价格
		</view>
		<!-- 团报截至日期 -->
		<view class="date flex">
			<text>团报截至日期</text>
			<text>{{teampaper.end_time}}</text>
		</view>
		<view class="linet"></view>
		<!-- 已报名 -->
		<view class="">
			<view class="singup" v-if="SinupNum">
				<view class="list"  v-for="(item, index) in SingupList">
					<image :src="item.Avatar" mode=""></image>
					<view class="right ">
						<view class="right_top">
							{{item.MemberName}}
							<text v-if="item.user_num >1">({{item.user_num}}人)</text>
							<image src="../../static/img/group_head.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="nosingup" v-else>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
				<view class="nosingup_no">暂无报名</view>
			</view>
		</view>
		
<!-- 		<view class="singup_loading">
			加载更多
			<image class="singup_loading_loading" src="../../static/img/loading.png" mode=""></image>
		</view> -->
		<!-- 报名 -->
		<view class="bot">
			<view class="bot_price">
				<view :class="['line_b',teamflag? 'oldprice':'newprice']">
					标准价
					<text>￥{{normalprice}}</text>
				</view>
				<view :class="teamflag?'newprice':'oldprice'">
					团报价
					<text>￥{{group_price}}</text>
				</view>
			</view>
			<!-- <view class="btn btn_n" v-if="group_index == 10">立即报名</view>
			<view v-else class="btn" @click="tomessage">立即报名</view> -->
			<view class="" v-if="SinupNum != teampaper.total_people && 
			vip_rank >= active_info.active_limit_n && group_index != 10" >
				<view v-if="active_info.state == 2 && 
				!active_info.is_sign  && 
				nowTime < singup_end_time  && 
				nowTime >singup_start_time " class="apply" @click="tomessage(active_id,group_index,pay_parice)">立即报名</view>
				<view v-else-if="nowTime > singup_end_time" class="apply apply_no">报名结束</view>
				<view v-else-if="active_info.is_sign == 1" class="apply" @tap="toorderpay">待支付</view>
				<view v-else-if="active_info.is_sign == 2" class="apply">已报名</view>
				<view v-else-if="active_info.state == 4" class="apply apply_no">冻结</view>
				<view v-else-if="active_info.state == 2 && nowTime < singup_start_time" class="apply apply_no">报名未开始</view>
				<view v-else-if="active_info.state == 3" class="apply apply_no">报名暂停</view>
			</view>
			<view v-else-if="SinupNum  == teampaper.total_people" class="apply_no">名额已满</view>
			<view v-else-if="vip_rank < active_info.active_limit_n" class="apply apply_no">立即报名</view>
			<view v-else-if="group_index == 10" class="apply apply_no">立即报名</view>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
	</view>
</template>

<script>
import loading from '@/components/loading/loading.vue';
export default {
	components: { loading },
	data() {
		return {
			loadflag: true,
			group_list: [],
			list: [],
			singup: [
				{ name: '安徒生的谎言', dateo: '2019-2-18', datet: '10:23:32' },
				{ name: '安徒生的谎言', dateo: '2019-2-18', datet: '10:23:32' },
				{ name: '安徒生的谎言', dateo: '2019-2-18', datet: '10:23:32' },
				{ name: '安徒生的谎言', dateo: '2019-2-18', datet: '10:23:32' }
			],
			group_index: 10,
			// 成团人数
			onepeople: 20,
			onepercent: '',
			// 已经报名人数
			haspeople: 50,
			haspercent: '',
			// 第二阶段报名人数
			twopeople: 40,
			twopercent: '',
			// 总报名数
			allpeople: 90,
			content: {},
			groupId: [],
			vip_rank: '',
			nowTime: '' ,// 当前时间戳
			active_info:{},
			singup_start_time:'',
			singup_end_time:'',
			start_time:'',
			teampaper:{},
			group_id:'',
			normalprice:0,
			teamprice:0,
			SingupList:[] ,// 已报名人员 
			SinupNum:'', // 已报名人数
			teamflag: false, // 判断团报有没有开启
			group_price : 0, //团报价
			is_base : false,
			active_id:49,
			pay_parice:'',
			team:{},
			progressflag:false,
			id:'',
			active_id:'',
			group_num:0
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.active_id = options.active_id
		this.content = JSON.parse(options.content);
		// console.log(this.content);
	},
	mounted() {
		// this.getgroup()
		this.nowTime = new Date().getTime();
		this.getuserList();
		this.getGroupList();
		this.jude_limit();
		this.getGroupInfo()
		this.getstorge()
	},
	methods: {
		// 获取缓存的信息
		getstorge() {
			 const res = uni.getStorageSync('teampaper');
			 this.team = JSON.parse(res)
			 // console.log(JSON.parse(res))
		},
		// 获取组别信息
		getgroup() {
			var team = this.content.team_info;
			team.forEach(item => {
				this.groupId = this.groupId.concat(item.id);
			});
		},
		// 计算报名人数的百分比
		percent() {
			// 成团人数占总人数的百分比
			this.onepercent = ((this.team.base_num / this.team.total_people) * 100).toFixed(2) + '%';
			
			this.twopercent = ((this.twopeople / this.allpeople) * 100).toFixed(2) + '%';
			// 已报名人数
			this.haspercent = ((this.SinupNum / this.team.total_people) * 100).toFixed(2) + '%';
			console.log(Number(this.haspercent.replace("%","")) > Number(this.onepercent.replace("%","")));
			if(Number(this.haspercent.replace("%","")) > Number(this.onepercent.replace("%",""))) {
				this.progressflag = true
			}
			// console.log(this.haspercent);
			// console.log(this.onepercent);
		},
		// 选择组别
		changegroup(key,id) {
			uni.showLoading({
				title:'检测报名状态'
			})
			var group = this.group_list[key];
			this.group_id = id

			for(var i in this.teampaper.team_info) {
				// console.log('ID:'+this.teampaper.team_info[i].id)
				if(this.teampaper.team_info[i].id == id ) {
					this.group_price = this.teampaper.team_info[i].price;
					this.group_num = this.teampaper.team_info[i].num;
				}
			}
			// 请求组别的数量有没有达到要求
			this.ajax('group/getTeamNum', {
				data : {
					team_id: id,
					teampaper_id: this.id
				},
				success :res => {
					uni.hideLoading()
					// console.log(res.msg >= this.group_num);
					// console.log(res)
					// console.log(this.group_num)
					if(res.msg >= this.group_num) {
						// console.log(res.msg < this.group_num);
						this.toast('此组别名额已满')
						this.group_index = 10
						this.group_price  = 0
						return false
					}else {
						this.group_index = key;
					}
				}
			})
			// 判断当前价格 标准价
			if (group.is_shift && this.nowTime > this.singup_start_time && this.nowTime < (group.shift_time*1000)) {
				this.normalprice = group.shift_price;
			} else if ((group.is_shift && this.vip_rank == 2 && this.nowTime > (group.shift_time*1000)) || (!group.is_shift && this.vip_rank == 2)) {
				this.normalprice = group.vip_price;
			} else {
				this.normalprice = group.normal_price;
			}
			if(this.teamflag) {
				this.pay_parice = this.group_price
			}else {
				this.pay_parice = this.normalprice
			}
		},
		tomessage(activeid,index,price) {
			uni.navigateTo({
				url: '/pages/index/message?activeid='+activeid+'&index='+index+'&price='+price+'&teampaper_Id='+this.teampaper.id
			});
		},
		// 获取用户列表
		getuserList() {
			this.ajax('group/getGroupUser', {
				data: {
					id: this.id
				},
				success: res => {
					// console.log(res);
					this.SingupList = res.msg.list
					this.SinupNum = res.msg.user_num
					// 判断有没有开启团报
					// console.log(this.teampaper.base_num);
					if(this.SinupNum >= this.teampaper.base_num) {
						this.teamflag = true
					}
					this.percent()
				}
			});
		},
		getGroupInfo () {
			this.ajax('group/getGroupInfo', {
				data: {
					id:this.id,
					active_id:this.active_id
				},
				success : res=> {
					// console.log(res)
					if(!res.code) {
						this.flag= false
						this.toast(res.msg)
					}else {
						this.flag = true
						var active_info =res.msg.active_info
						active_info.create_time_m = active_info.create_time.split(' ')[0];
						active_info.end_time_m = active_info.end_time.split(' ')[0];
						active_info.end_time_b = active_info.end_time.slice(0, active_info.start_time.length - 3);
						active_info.sign_up_end_m = active_info.sign_up_end.split(' ')[0];
						active_info.sign_up_start_m = active_info.sign_up_start.split(' ')[0];
						active_info.start_time_m = active_info.start_time.split(' ')[0];
						active_info.start_time_b = active_info.start_time.slice(0, active_info.start_time.length - 3);
						active_info.update_time_m = active_info.update_time.split(' ')[0];
						active_info.sign_up_start = active_info.sign_up_start.replace(/-/g,'/');
						active_info.sign_up_end = active_info.sign_up_end.replace(/-/g,'/');
						active_info.start_time = active_info.start_time.replace(/-/g,'/');
						this.singup_start_time = new Date(active_info.sign_up_start).getTime();
						this.singup_end_time = new Date(active_info.sign_up_end).getTime();
						this.start_time = new Date(active_info.start_time).getTime();
						active_info.active_limit_n =active_info.active_limit+1
						this.active_info = res.msg.active_info
						this.teampaper = res.msg.teampaper
						this.getactiveInfo()
						// time.start_time_c = time.start_time.split(' ')[0]
						// time.end_time_c = time.end_time.split(' ')[0]
						// this.active_info =res.msg.active_info
						// this.teampaper =res.msg.teampaper
						this.loadflag = false
					}
					
				}
			})
		},
		// 获取活动的基本信息
		getactiveInfo() {
			this.ajax('active/activeBaseInfo', {
				data: { id: this.active_id },
				success: res => {
					// console.log(res)
					this.active_info.is_sign = res.msg.is_sign;
				}
			});
		},
		// 获取团报组别
		getGroupList() {
			var teamid = [];
			var teamGroup = this.content.team_info;
			teamGroup.forEach(item => {
				// console.log(item)
				teamid.push(item.id);
			});
			// console.log(teamid);
			this.ajax('group/getGroupTeam', {
				data: {
					team_id: teamid
				},
				success: res => {
					// console.log(res);
					if (res.code) {
						res.msg.forEach(item => {
							if (this.active_info.type != 1 && this.vip_rank != 2) {
								this.singup_money = item.normal_price;
							} else if (this.active_info.type != 1 && this.vip_rank == 2) {
								this.singup_money = item.vip_price;
							}
							(item.people = []),
							 // console.log(item);
							// 判断总的报名人数
							this.sinup_people += item.total_people;
							item.allpeople_num = item.form.length;
							item.form.forEach(items => {
								if (items.not_null) {
									item.people = item.people.concat(items);
								}
							});
							item.people_num = item.people.length;
						});
						this.group_list = res.msg;
						this.group_list.forEach( (item) =>{
							for(var i in teamGroup) {
								console.log('ID:'+teamGroup[i].id)
								if(teamGroup[i].id == item.id ) item.group_price = teamGroup[i].price;
							}
						})
					}
				}
			});
		},
		// 判断用户有没有权限进行报名
		jude_limit() {
			this.ajax('Order/getOrderLimit', {
				data: {
					active_id: this.active_id
				},
				success: res => {
					// console.log(res);
					if (res.code) {
						this.vip_rank = res.msg;
					} else {
						this.toast('获取会员信息失败');
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/group.less');
</style>
